import React, {PureComponent, Suspense} from 'react';
import PageLoading from '../PageLoading';
import {connect} from "dva/index";
import {Modal} from "antd/lib/index";
import request from "@/utils/requestUtils";

const BaseMenu = React.lazy(() => import('./BaseMenu'));

class SiderMenu extends PureComponent {

    constructor(props) {
        super(props);
        //加载用户菜单
        this.getUserMenu();
    }

    state = {
        location : {pathname : window.location.pathname},
    }

    //加载用户菜单
    getUserMenu = () => {
        request("/api/getUserMenus", {
            method : "post",
            data : {
                username : "admin",
            },
            responseType : "json",
        }).then(res => {
            if(res.code === 0) {
                //保存所有菜单信息
                this.props.dispatch({
                    type: 'menu/setMenuData',
                    menuData: res.data,
                });
                //保存所有菜单的路径作为菜单key
                this.props.dispatch({
                    type: 'menu/setFlatMenuKeys',
                    flatMenuKeys: this.getFlatMenuKeys(res.data),
                });
            } else {
                Modal.warning({
                    title : "系统通知",
                    content : res.msg,
                });
            }
        });
    }

    //获取所有菜单的路径作为菜单key
    getFlatMenuKeys = menuData => {
        let keys = [];
        menuData.forEach(item => {
            keys.push(item.path);
            if (item.children) {
                keys = keys.concat(this.getFlatMenuKeys(item.children));
            }
        });
        return keys;
    };

    //是否点击的菜单为一级菜单
    isMainMenu = key => {
        const {menuData} = this.props;
        return menuData.some(item => {
            if (key) {
                return item.key === key || item.path === key;
            }
            return false;
        });
    };

    //菜单展开事件
    handleOpenChange = openKeys => {
        const moreThanOne = openKeys.filter(openKey => this.isMainMenu(openKey)).length > 1;
        this.props.dispatch({
            type: 'menu/setOpenKeys',
            openKeys: moreThanOne ? [openKeys.pop()] : [...openKeys],
        });
    };

    //菜单选中事件
    handleSelect = () => {
        if(window.location.pathname !== this.state.location.pathname) {
            this.setState({location : {pathname : window.location.pathname}});
        }
    }

    render() {
        return (
            <Suspense fallback={<PageLoading/>}>
                <BaseMenu
                    mode="inline"
                    theme="dark"
                    onOpenChange={this.handleOpenChange}
                    onSelect={this.handleSelect}
                    style={{padding: '16px 0', width: '100%'}}
                    location={this.state.location}
                    collapsed={this.props.collapsed}
                    menuData={this.props.menuData}
                    flatMenuKeys={this.props.flatMenuKeys}
                    openKeys={this.props.openKeys}
                />
            </Suspense>
        );
    }
}

export default connect(({ menu }) => ({
    menuData : menu.menuData,
    flatMenuKeys : menu.flatMenuKeys,
    openKeys : menu.openKeys
}))(SiderMenu);
